<template lang="html">
  <div class="official">
    <header-item></header-item>
    <div class="main">
      <div class="banner">
        <img src="../assets/images/jlBanner.png" class='b1'>
        <img src="../assets/images/b2.png" class='b2'>
        <!-- <img src="../assets/images/jlBanner.png" class='b3'> -->
      </div>
      <div class="content">
        <h1>一切从这里开始</h1>

        <div class="videos clearfix transformY" hidden>
          <!-- <video poster="posterimage.jpg"> -->

          <!-- <video controls class='pull-left'>
            <source src="../../static/video.mp4" type="video/mp4">
          </video> -->

          <div class="pull-left">
            <iframe height='300' width='500' src='http://player.youku.com/embed/XMzE4ODUxMjY5Mg==' frameborder='0' allowfullscreen></iframe>
          </div>

          <!-- <video controls class='pull-right'>
            <source src="../../static/video.mp4" type="video/mp4">
          </video> -->

          <div class="pull-right">
            <iframe height='300' width='500' src='http://player.youku.com/embed/XMzE4OTc4NDgzMg==' frameborder='0' allowfullscreen></iframe>
          </div>

        </div>

        <!-- <h2>为你精准匹配三观相似、品味相近、颜值相吸的人</h2> -->

        <div class="imgs3">
          <el-row class='transformY'>
            <el-col :span="8" class='coll'>
              <img src="../assets/images/byt/l1.jpg">
              <img src="../assets/images/byt/l2.jpg">
              <img src="../assets/images/byt/l3.jpg">
            </el-col>
            <el-col :span="8" class="colm">
              <img src="../assets/images/byt/m1.png">
            </el-col>
            <el-col :span="8" class='colr'>
              <img src="../assets/images/byt/r1.jpg">
              <img src="../assets/images/byt/r2.jpg">
              <img src="../assets/images/byt/r3.jpg">
            </el-col>
          </el-row>
        </div>

        <div class="labelTitle">
          <i class='fa fa-caret-down'></i>
          <div class="text">
            还有这些
          </div>
        </div>

        <div class="latitude transformY">
          <el-row>
            <el-col :span="8">
              <img src="../assets/images/byt/t1.png">
              <div class="ltext">
                条漫作品
              </div>
            </el-col>
            <el-col :span="8">
              <img src="../assets/images/byt/t2.png">
              <div class="ltext">
                豆丁美眉
              </div>
            </el-col>
            <el-col :span="8">
              <img src="../assets/images/byt/t3.png">
              <div class="ltext">
                Cosplay画册
              </div>
            </el-col>
          </el-row>
        </div>

        <div class="labelTitle">
          <i class='fa fa-caret-down'></i>
          <div class="text">
            青春有
          </div>
        </div>
      </div>

      <img class='middleBanner transformY' src="../assets/images/byt/middleBanner.png">

      <div class="content" hidden>
        <div class="labelTitle">
          <i class='fa fa-caret-down'></i>
          <div class="text">
            根据手机下载APP
          </div>
        </div>

        <div class="downLoad transformY">
          <el-row>
            <el-col :span="8">
              <div class="box apple" @click='openIos'>
                <i class='fa fa-apple'></i>
                <div class="equipment">iPhone</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="box android" @click='openAndroid'>
                <i class='fa fa-android'></i>
                <div class="equipment">Android</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="box code" @click='msg'>
                <img src="../assets/images/3.0/code.png">
                <div class="equipment">小程序</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <footer-item></footer-item>
  </div>
</template>

<script>
import HeaderItem from '../components/Header';
import FooterItem from '../components/Footer';
export default {
  data () {
    return {
      windowHeight:null,
      $document:null
    }
  },
  methods:{
  	tourl(url){
      tools.router.push({path:url})
    },
    openAndroid(){
      window.open('http://sj.qq.com/myapp/detail.htm?apkName=com.bfzs.smartapplication');
    },
    openIos(){
      window.open('https://itunes.apple.com/cn/app/%E5%B7%A8%E6%A2%A8-%E9%AB%98%E8%B4%A8%E9%87%8F%E7%9C%9F%E5%AE%9E%E5%9C%BA%E6%99%AF%E4%BA%A4%E5%8F%8B%E5%B9%B3%E5%8F%B0/id1279229836?mt=8');
    },
    msg(a){
      // this.$notify.info({
      //   title: '抱歉',
      //   message: `${a} APP正在极速开发中`,
      //   type: 'success'
      // });
      this.$notify.info({
        title: '提示',
        message: '请用微信扫一扫识别小程序码',
        type: 'success'
      });
    },
    removeElem(elem){
      setTimeout(function(){
        elem.removeClass('transformY');
      },1500)
    },
    transformY(){
      var _this = this;
      var elem = $('.transformY');
      if(elem.length > 0){
        for(var i = 0;i<elem.length;i++){
          // if($(elem[i]).offset().top-20 <= this.windowHeight + this.$document.scrollTop()){
            $(elem[i]).css({
              'opacity':'1',
              'transform':'translateY(0)'
            })
            _this.removeElem($(elem[i]))
          // }else{
          //   break;
          // }
        }
      }else{
        $(window).unbind();
        console.log('finish')
      }
    }
  },
  created(){
    // if(tools.getBrowser().isMobile){
    //   tools.router.push({path:'officialmob'})
    // }
  },
  mounted(){
    var _this = this;
    this.windowHeight = $(window).height();
    this.$document = $(document);

    // $(window).scroll(function(){
    //   _this.transformY();
    // });

    setTimeout(function(){
      _this.transformY();
    },500)

  },
  components:{
    HeaderItem,FooterItem//,Hello
  }
}
</script>
<style lang='scss' scoped>
@import '../assets/faicon/css/font-awesome.min.css';
.official{
  width: 100%;
  // font-family: "Helvetica Neue", "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "\9ED1\4F53", Arial, sans-serif, "微软雅黑" !important;

  .transformY{
    opacity: 0;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    transition: all 1.5s ease;
  }

  .main{
    width: 100%;
    background: #80D8D0;
    .banner{
      height: 800px;
      background: #80D8D0;
      position: relative;
      overflow: hidden;

      .b1{
        position: absolute;
        width: 1141px;
        height: 502px;
        top: 0;
        left: -400px;
        right: 0;
        bottom: -300px;
        margin: auto;
        transition: transform 2s ease;
        &:hover{
          transform: scale(1.05);
        }
      }

      .b2{
        position: absolute;
        width: 600px;
        right: 0;
        bottom: 0;
        transition: transform 2s ease;
        &:hover{
          transform: scale(1.05);
        }
      }
    }

    .content{
      width: 1200px;
      color: #fff;
      padding-bottom: 60px;
      margin: 0 auto;
      background: #80D8D0;

      h1{
        font-weight: normal;
        text-align: center;
        margin: 95px 0;
        font-size: 50px;
      }

      .videos{
        padding: 0 50px;
        margin-bottom: 100px;
        video{
          width: 500px;
          height: 300px;
        }
      }

      h2{
        margin-bottom: 100px;
        color: #fff;
        text-align: center;
        font-size: 30px;
        font-weight: normal;
      }

      .imgs3{
        .coll{
          padding-right: 10px;
          position: relative;
          right: -100px;
          img{
            width: 300px;
            display: block;
            margin-bottom: 10px;
            height: 164px;
            object-fit:cover;
            object-position:top 0 left 0;
            border-radius: 10px;
          }
        }
        .colm{
          img{
            width: 100%;
            display: block;
            margin: 0 auto;
            transform: scale(2);
          }
        }
        .colr{
          padding-left: 10px;
          position: relative;
          left: -10px;
          img{
            width: 300px;
            display: block;
            margin-bottom: 10px;
            height: 164px;
            object-fit:cover;
            object-position:top -10px left 0;
            border-radius: 10px;
          }
        }
      }

      .labelTitle{
        margin: 30px 0 60px;
        text-align: center;
        i{
          font-size: 80px;
          color: #fff;
        }
        .text{
          font-size: 30px;
        }
      }

      .latitude{
        img{
          display: block;
          margin: 0 auto;
        }
        .ltext{
          color: #fff;
          text-align: center;
          font-size: 25px;
          margin-top:10px;
        }
      }

      .downLoad{
        .box{
          border: 1px solid #B6B6B6;
          height: 500px;
          width: 95%;
          margin: 0 auto;
          padding-top: 180px;
          text-align: center;
          cursor: pointer;
          transition: all .3s ease;

          &.apple{
            color: #B6B6B6;
            i{
              font-size: 120px;
              margin-bottom: 40px;
            }
            .equipment{
              font-size: 25px;
            }
          }
          &.android{
            i{
              color:#93C43E;
              font-size: 120px;
              margin-bottom: 40px;
            }
            .equipment{
              color: #B6B6B6;
              font-size: 25px;
            }
          }
          &.code{
            img{
              width: 134px;
              height: 134px;
              margin: 0 auto;
              margin-bottom: 18px;
            }
            font-size: 25px;
            color: #B6B6B6;
          }

          &:hover{
            background: #81A6FF;
            color: #fff !important;
            box-shadow: 10px 10px 20px rgba(0,0,0,.3);
            -webkit-transform: scale(1.05);
            transform: scale(1.05);
            i,.equipment{
              color: #fff !important;
            }
          }


        }
      }
    }

    .middleBanner{
      width: 100%;
      margin: 0 auto;
      // height: 370px;
    }
  }
}
</style>
